<template>
  <div class="common-layout">
    <nav id="nav">
      <div>
        <h1>
          <a href="###" class="logo">王者荣耀</a>
        </h1>
        <ul>
          <li><a href="/">官网首页</a><em>HOME</em></li>
          <li><a href="/yxjs">游戏介绍</a><em>DATA</em></li>
          <li><a href="/yxgl">游戏攻略</a><em>STRATEGY</em></li>
          <li><a href="/wzyyt">王者音乐听</a><em>MUSIC</em></li>
          <li><a href="/yxbz">游戏壁纸</a><em>WALLPAPER</em></li>
          <li><a href="/djhj">对局环境</a><em>CONFRONTATION</em></li>
        </ul>
      </div>
    </nav>

    <el-container>
      <el-header>


      </el-header>

      <el-main>
        <header id="header">
          <div class="zynr">
            <span class="zynr_bt" style="margin-left: -1000px"><a href="/" class="tb"> </a>王者荣耀首页> 游戏壁纸</span>
            <div class="yxbz">
              <div class="yxbz_bt1">
<!--                ../img/yxbz/bz16.jpg-->
                <img src="../assets/img/yxbz/icon_HD.png" height="25" width="22" style="width:27px;height:25px;float:left;margin:3px 10px 0 0;border-radius:5px;">
                <span style="font-size: 24px; margin-left: -400px">高清壁纸</span>
                <div class="yxbz_bt2">
                  <span class="bt1"><img src="../assets/img/yxbz/icon_chock.png" style="width: 15px;height: 14px;">时间排序</span>
                  <span class="bt2"><img src="../assets/img/yxbz/icon_hot.png" style="width: 15px;height: 14px;">热度排序</span>
                  <div class="bt3">
                    <input type="text" name="" class="bt3_ys1" placeholder="请输入壁纸名称搜索">
                    <a href="" class="bt3_ys2">
                      <img width="18" height="17" src="../assets/img/yxbz/vl_search_icon.png" style="margin: 0;">
                    </a>
                  </div>
                </div>
              </div>
              <div  style="width:936px; height:500px;">
                <div class="tp">
                  <a href="../assets/img/yxbz/bz1.jpg" target="_blank"><img src="../assets/img/yxbz/bz1.jpg" width="215" height="120"></a>
                  <p>貂蝉-猫影幻舞</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz2.jpg" target="_blank"><img src="../assets/img/yxbz/bz2.jpg" width="215" height="120"></a>
                  <p>貂蝉-圣诞恋歌</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz3.jpg" target="_blank"><img src="../assets/img/yxbz/bz3.jpg" width="215" height="120"></a>
                  <p>老夫子-圣诞老人</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz4.jpg" target="_blank"><img src="../assets/img/yxbz/bz4.jpg" width="215" height="120"></a>
                  <p>蔡文姬-繁星吟游</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz5.jpg" target="_blank"><img src="../assets/img/yxbz/bz5.jpg" width="215" height="120"></a>
                  <p>王者四周岁特别版本【嗨！我邀请你】</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz6.jpg" target="_blank"><img src="../assets/img/yxbz/bz6.jpg" width="215" height="120"></a>
                  <p>王者四周岁特别版本【嗨！我邀请你】</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz7.jpg" target="_blank"><img src="../assets/img/yxbz/bz7.jpg" width="215" height="120"></a>
                  <p>曹操-天狼征服者</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz8.jpg" target="_blank"><img src="../assets/img/yxbz/bz8.jpg" width="215" height="120"></a>
                  <p>鲁班大师-归虚梦演</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz9.jpg" target="_blank"><img src="../assets/img/yxbz/bz9.jpg" width="215" height="120"></a>
                  <p>鲁班大师-神匠</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz10.jpg" target="_blank"><img src="../assets/img/yxbz/bz10.jpg" width="215" height="120"></a>
                  <p>张良-黄金白羊座</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz11.jpg" target="_blank"><img src="../assets/img/yxbz/bz11.jpg" width="215" height="120"></a>
                  <p>杨戬-根源之目</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz12.jpg" target="_blank"><img src="../assets/img/yxbz/bz12.jpg" width="215" height="120"></a>
                  <p>上官婉儿-梁祝</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz13.jpg" target="_blank"><img src="../assets/img/yxbz/bz13.jpg" width="215" height="120"></a>
                  <p>夏侯惇-朔风刀</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz14.jpg" target="_blank"><img src="../assets/img/yxbz/bz14.jpg" width="215" height="120"></a>
                  <p>周瑜-赤莲之焰</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz15.jpg" target="_blank"><img src="../assets/img/yxbz/bz15.jpg" width="215" height="120"></a>
                  <p>兰陵王-驯魔猎人</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
                <div class="tp">
                  <a href="../assets/img/yxbz/bz16.jpg" target="_blank"><img src="../assets/img/yxbz/bz16.jpg" width="215" height="120"></a>
                  <p>后羿-黄金射手座</p>
                  <ul>
                    <li><a href="">1024x768</a></li>
                    <li><a href="">1400x900</a></li>
                    <li><a href="">1920x1200</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="ggzz">
              <img src="dzht.png" style="float: left;">
              <img src="cygj.png" style="float: left;">
              <img src="ympc.png" style="float: left;">
            </div>
          </div>
        </header>
      </el-main>
      <el-footer>
        <div class="footer1" >
          <!-- 页脚左侧部分，包含游戏开发商的logo链接 -->
          <div class="footers">
            <a href="https://ieg.tencent.com/" target="_blank" class="footer_logo1"></a>
            <a href="https://timi.qq.com/" target="_blank" class="footer_logo2"></a>
          </div>
          <!-- 温馨提示区域，包括游戏适龄提示和健康游戏忠告 -->
          <div class="tip1">
            <p style="color: #333;font-weight: bold;text-align: left">
              温馨提示：本游戏适合16岁(含)以上玩家娱乐</p>
            <p style="text-align: left;font-size: 12px;margin-top: 10px">
              <em>抵制不良游戏</em><em>拒绝盗版游戏</em><em>注意自我保护</em><em>谨防受骗上当</em><em>适度游戏益脑</em><em>沉迷游戏伤身</em><em>合理安排时间</em><em>享受健康生活</em>
            </p>
            <p class="tip_1" style="text-align: left;font-size: 12px;margin-top: 10px">
              《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为艺术创作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。</p>
          </div>
          <!-- 版权信息区域 -->
          <div class="tip2">
            <p style="font-weight: bold; margin: auto auto;"><img src="../../public/weiname.png" alt=""></p>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>

</script>



<style scoped>
@import url(../assets/css/ys5.css);
@import url(../assets/css/wztb.css);
@import url(../assets/css/wzwb.css);


footer {
  height: 362px;
  background: url("../assets/img/wzkj/wb.jpg") no-repeat center 0;
  position: relative;
  top: 30px;
}


.footer1 {
  margin: 0 auto;
  position: relative;
  background: none;
  width: 1200px;
  padding-top: 80px;
}


#footer2 {

  padding: 0;
}


.footers {
  display: block;
  float: none;
  height: 66px;
  padding-bottom: 10px;
  margin-bottom: 32px;
  border-bottom: 2px solid #d4d4d4;
}


.footers a {
  display: block;
  float: left;
}


.footer_logo1,
.footer_logo2 {
  display: inline-block;
}

.footer_logo1 {
  width: 285px;
  height: 64px;
  margin: 0;
  background: url("../assets/img/wzkj/spr.png") no-repeat;
}

.footer_logo2 {
  width: 70px;
  height: 64px;
  margin: 0;
  background: url("../assets/img/wzkj/spr.png") no-repeat -285px 0;
}


.tip1, .tip2 {
  position: absolute;
  font-size: 16px;
  color: #666;
  float: left;
}

.tip1 {
  left: 0;
  top: 170px;
  width: 508px;
}

.tip1 em {
  font-style: normal;
  margin-right: 16px;
  color: #6d6d6d;
}

.tip_1 {
  font-size: 16px;
  color: #666;
  margin-top: 6px;
}

.tip2 {
  left: 520px;
  top: 140px;
  width: 508px;
}
</style>